<!--
 * @Description: 
 * @Autor: luojie
 * @Date: 2021-08-12 09:47:34
 * @LastEditors: luojie
 * @LastEditTime: 2021-08-13 19:46:27
-->
<template>
  <view class="wrapper">
    
    <view class="form-wrapper myform">
      <view class="title"> 入住信息变更 </view>
      <view class="form-content">
        <view>
          <view class='form-item form-item-row'>
            <view>姓名</view>
            <view>{{ name }}</view>
          </view>
          <view class='form-item form-item-row'>
            <view class='input-label'>新入住房间</view>
            <view>
              <my-uni-combox 
                inputWidth='400rpx' 
                :candidates="candidates" 
                placeholder="请选择房间" 
                @input='inputChange'
              ></my-uni-combox>
            </view>
          </view>
          <view class='form-item form-item-row'>
            <view>原房间</view>
            <view>{{ roomNum }}</view>
          </view>
          <view class='form-item form-item-row'>
            <view>隔离天数</view>
            <view>{{ moveDay }}</view>
          </view>
          <view class='form-item form-item-row'>
            <view>入住时间</view>
            <view>{{ formData.moveStartTime }}</view>
          </view>
          <view class='form-item form-item-row'>
            <view>计划解除隔离时间</view>
            <view>{{ moveEndTime }}</view>
          </view>
          <view
            class="form-item inline-item form-item-border-none form-item-radio"
          >
            <view class="label">原房间是否需要消杀</view>
            <uni-data-checkbox
              v-model="isKill"
              :localdata="results"
              class="my-raido"
              @change="onTreatmentRadioChange"
            ></uni-data-checkbox>
          </view>

          <view class="form-item form-item-textarea form-item-border-none">
            <view class="label">变更原因</view>

            <textarea maxlength='400' placeholder-class="place-holder" placeholder="请输入不超400字的变更原因" v-model="formData.remark" />
          </view>
          <view class='placeholder'></view>
        </view>
        
      </view>
      <view class="example">
        <button class="submit" @click="submitForm('form')">确认</button>
      </view>
    </view>
  </view>
</template>

<script>
import { getData } from "@/api";
const {
  dateTimePicker,
  getMonthDay,
  generateTimeStr,
} = require("@/utils/dateTimePicker.js");
import dayjs from "dayjs";
import myUniCombox from '@/components/my-uni-combox.vue';
export default {
  data() {
    return {
      isKill:null,
      roomNum:'',
      formData: {
        remark:'',
        houseId: "",
        isKill: null,
        moveStartTime: "",
        newHouseId: "",
        personId: "",
        moveDay: 14
      },
      results: [
        {
          text: "否",
          value: 0,
        },
        {
          text: "是",
          value: 1,
        },
      ],
      name: '',
      candidates:[],
      moveDay:0, // 隔离天数
      moveEndTime: null, // 计划解除隔离时间
    };
  },
  components:{
    myUniCombox
  },
  async onLoad(e) {
    this.getRoomData();
    let { name, houseId, personId, moveDay, moveStartTime, moveEndTime } = this.personInfo = uni.getStorageSync('personInfo') || {}
    this.name = name;
    this.moveDay = moveDay;
    this.moveEndTime = moveEndTime
    this.formData.houseId = houseId;
    this.formData.personId = personId;
    this.formData.moveStartTime = moveStartTime
    this.roomNum = uni.getStorageSync('thisRoomNum')
  },
  methods: {
    getRoomData(){
      getData('roomInfo','get').then(res=>{
        let array = res.sort((a,b)=>{
          return a.roomFloor-b.roomFloor;
        });
        let candidates = array.map(row => {
          return row.roomInfos.map(item => {
            return {
              label:`${item.roomFloor}-${item.roomNum}-${item.roomState=="01"?'未入住':'已入住'}`,
              value: item.houseId || null
            }
          })
        })
        this.candidates = candidates.flat(Infinity)
      })
    },
    inputChange(e){
      if(typeof e == 'string'){
        this.formData.newHouseId = null
      }else{
        this.formData.newHouseId = e.value
      }
    },
    onTreatmentRadioChange(e){
      this.isKill = e.detail.value
      this.formData.isKill = Boolean(this.isKill)
    },
    /**
     * 手动提交
     * @param {Object} form
     */
    submitForm(form) {
      let tip = '';
      
      if(this.formData.isKill == null){
        tip = '请选择原房间是否需要消杀'
      }
      if(!this.formData.newHouseId){
        tip = '请选择新入住房间'
      }
      if(tip){
        uni.showToast({
          title: tip,
          icon: 'none',
          duration: 2000
        });
        return;
      }
      uni.showLoading({
        title: '加载中',
        icon: 'none',
        mask: true
      });
      getData('moveChange','POST',this.formData).then(res=>{
        uni.hideLoading();
        uni.reLaunch({
          url: `./success`,
        });
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  box-sizing: border-box;
  // padding-bottom: 120rpx;
  background-color: #f9f9f9;
  font-family: PingFang SC;
  .example {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    padding-bottom: 30rpx;
    background-color: #f9f9f9;
    z-index: 10;
  }
  .title {
    height: 98rpx;
    line-height: 98rpx;
    font-size: 40rpx;
    font-weight:600;
    padding: 0 32rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #e5e5e5;
    position: relative;
    img {
      width: 26rpx;
      height: 15rpx;
      position: absolute;
      right: 38rpx;
      top: 50%;
      transform: translateY(-50%);
      transition: all 0.5s;

      &.rotate {
        transform: rotate(-90deg);
        transition: all 0.5s;
      }
    }
  }
  .time {
    color: #2c9af1;
    border-bottom: none;
    background-color: #fff;
  }
}

.placeholder{
  height:80rpx;
}
// 表单
.form-wrapper {
  margin-top: 30rpx;
  text {
    color: red;
  }
  .form-content {
    padding: 0 32rpx;
    background-color: #fff;
    .place-holder{
      font-size:34rpx;
      color:#CCCCCC;
      font-weight:500;
    }
    .form-item-row{
      .input-label{
        
      }
    }
  }
  .form-item-border-none {
    border-bottom: none !important;
  }
  .form-item-radio {
    label {
      margin-left: 60rpx;
    }
    .uni-data-checklist .checklist-group .checklist-box {
      margin-right: 0 !important;
      margin-left: 60rpx !important;
    }
  }
  .submit {
    // margin-top: 30rpx;

    height: 94rpx;
    line-height: 94rpx;
    background: #2c9af1;
    opacity: 1;
    border-radius: 16rpx;
    font-size:34rpx;
  }
  .form-item {
    padding: 40rpx 0;
    color: #999999;
    font-size: 30rpx;
    border-bottom: 1rpx solid #E5E5E5;
    .label {
      color: #666666;
      font-size: 30rpx;
      font-weight:500;
    }
    .checklist-text {
      color: #2c9af1;
      font-size: 30rpx !important;
      font-weight: bold;
    }
    view:first-child{
      font-weight:500;
      font-family: PingFang SC;
    }
    view:last-child{
      color:#666666;
      font-weight:500;
      font-family: PingFang SC;
      margin-top:26rpx;
      font-size:34rpx;
    }
  }
  .form-item-textarea {
    .label {
      padding-bottom: 20rpx !important;
    }
    textarea {
      max-height: 200rpx;
      width:100%;
    }
  }

  .form-item-select-picker {
    border-bottom: none;
    .picker {
      position: relative;
      display: flex;
      align-items: center;
      height: 77rpx;
      padding: 0 40rpx;
      background: #ffffff;
      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.16);
      border-radius: 6rpx;
      picker {
        width: 100%;
      }
    }
    .right-arrow-icon {
      display: flex;
      align-items: center;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 50rpx;
      transform: rotate(90deg);
      image {
        width: 20rpx;
      }
    }
  }
  .form-item-date-picker,
  .form-item-textarea,
  .form-item-select-picker {
    padding-bottom: 36rpx;
    .label {
      padding-bottom: 10rpx;
    }
  }

  .inline-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
